<template>
  <div style="height: 95vh; background-color: #eeeeee ;overflow: auto;scrollbar-width: none">
    <div style="padding-top: 0.5rem" >
      <i style="font-size: 1rem" class="iconfont icon-fanhui" @click="router.go(-1)"></i>
      <span style="margin-left: 35%">房型介绍</span>
    </div>
    <!--  轮播图-->
    <div style="margin-top: 0.5rem">
      <el-carousel trigger="click" height="12rem" indicator-position="none" motion-blur>
        <el-carousel-item v-for="item in hotel_images" :key="item">
          <img :src="item" alt="" style="width: 100%;height:100%">
        </el-carousel-item>
      </el-carousel>
    </div>
    <!--    文字描述-->
    <div class="wordtop">
      <div class="titleword">
        豪华大床房
      </div>
      <!--      room 的标签-->
      <div>
        <el-button plain>舒适</el-button>
        <el-button plain>独栋</el-button>
        <el-button plain>私密</el-button>
      </div>
      <!--      room 价格-->
      <div style="font-size: 17px;margin-top: 0.5rem;position: relative">
        ￥598.00
        <div>
          <i class="iconfont icon-vip1 iconstyle"></i>
        </div>
      </div>

      <!--      预定-->
      <div class="yudingstyle" @click="router.push('/admin/buy_room_reservation')">
        预定
      </div>
    </div>
    <!--    room info-->
    <div class="room_info">
      <div style="margin-top: 0.2rem">
        房型信息
      </div>
      <div>
        <table
          style="font-size: 13px;color:grey"
          width="100%" cellspacing="0">
          <tr>
            <td>房间面积</td>
            <td>65平方米</td>
            <td>床型</td>
            <td>1.8mx2m</td>
          </tr>
          <tr>
            <td>可住人数</td>
            <td>2人</td>
            <td>能否加床</td>
            <td>不可加床</td>
          </tr>
          <tr>
            <td>是否含早餐</td>
            <td>含两位</td>
          </tr>
        </table>
      </div>

    </div>
    <!--      服务设置-->
    <div class="server_setting">
      <div style="margin-top: 0.2rem">
        服务设置
      </div>
      <div>
        <table width="100%">
          <tr>
            <td><i class="iconfont icon-icon-test"> 行李托管 </i></td>
            <td><i class="iconfont icon-xiuxianyule"> 休闲娱乐</i></td>
            <td><i class="iconfont icon-youyongchi"> 游泳池</i></td>
          </tr>
          <tr>
            <td><i class="iconfont icon-canyinfuwu"> 餐饮服务</i></td>
            <td><i class="iconfont icon-safe"> 保险柜</i></td>
            <td><i class="iconfont icon-WIFI"> 酒店wifi</i></td>
          </tr>
          <tr>
            <td><i class="iconfont icon-bathtub-light"> 浴缸</i></td>
            <td><i class="iconfont icon-chuifengji"> 吹风机</i></td>
          </tr>
        </table>
      </div>
    </div>
    <!--    评价以及评论-->
    <div class="pingjia">
      <div>评论及评价</div>
      <div style="display: flex;justify-content: space-around">
        <div>
          <h1>{{ value }}</h1>

        </div>
        <div>
          <el-rate
            style="font-weight: bolder"
            size="large"
            v-model="value"
            disabled
            show-score
            text-color="#ff9900"
            score-template="{value} 分"
          />
        </div>

      </div>

    </div>
    <div class="pinglun">
      <div style="display: flex">
        <div style="width: 30%;height: 4rem;margin-top: 1rem">
          <img
            src="https://ts3.cn.mm.bing.net/th?id=OIP-C._Pv-n6b__q1YmmX7svteGAAAAA&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2"
            style="width: 70%;height: 100%; border-radius: 50%"
            alt="">

        </div>
        <div style="width: 60%;">
          <div style="display: flex;justify-content: space-between;margin-top: 1rem">
            <div>
              <div>核桃仁</div>
            </div>
            <div>
              <el-rate
                style="font-weight: bolder"
                size="large"
                v-model="value"
                disabled
                show-score
                text-color="#ff9900"
                score-template="{value}"
              />
            </div>
          </div>
          <div style="font-size: 12px">
            我觉得十分的有意思，这是一次最好的体验 我觉得十分的有意思，这是一次最好的体验
          </div>

        </div>

      </div>
      <hr>
       <div style="display: flex">
        <div style="width: 30%;height: 4rem;margin-top: 1rem">
          <img
            src="https://ts3.cn.mm.bing.net/th?id=OIP-C._Pv-n6b__q1YmmX7svteGAAAAA&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2"
            style="width: 70%;height: 100%; border-radius: 50%"
            alt="">
        </div>
        <div style="width: 60%;">
          <div style="display: flex;justify-content: space-between;margin-top: 1rem">
            <div>
              <div>核桃仁</div>
            </div>
            <div>
              <el-rate
                style="font-weight: bolder"
                size="large"
                v-model="value"
                disabled
                show-score
                text-color="#ff9900"
                score-template="{value}"
              />
            </div>
          </div>
          <div style="font-size: 12px">
            我觉得十分的有意思，这是一次最好的体验 我觉得十分的有意思，这是一次最好的体验
          </div>
        </div>

      </div>
      <hr>
      <div style="display: flex">
        <div style="width: 30%;height: 4rem;margin-top: 1rem">
          <img
            src="https://ts3.cn.mm.bing.net/th?id=OIP-C._Pv-n6b__q1YmmX7svteGAAAAA&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2"
            style="width: 70%;height: 100%; border-radius: 50%"
            alt="">

        </div>
        <div style="width: 60%;">
          <div style="display: flex;justify-content: space-between;margin-top: 1rem">
            <div>
              <div>核桃仁</div>
            </div>
            <div>
              <el-rate
                style="font-weight: bolder"
                size="large"
                v-model="value"
                disabled
                show-score
                text-color="#ff9900"
                score-template="{value}"
              />
            </div>
          </div>
          <div style="font-size: 12px">
            我觉得十分的有意思，这是一次最好的体验 我觉得十分的有意思，这是一次最好的体验
          </div>

        </div>

      </div>
      <hr>
      <div style="display: flex">
        <div style="width: 30%;height: 4rem;margin-top: 1rem">
          <img
            src="https://ts3.cn.mm.bing.net/th?id=OIP-C._Pv-n6b__q1YmmX7svteGAAAAA&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2"
            style="width: 70%;height: 100%; border-radius: 50%"
            alt="">

        </div>
        <div style="width: 60%;">
          <div style="display: flex;justify-content: space-between;margin-top: 1rem">
            <div>
              <div>核桃仁</div>
            </div>
            <div>
              <el-rate
                style="font-weight: bolder"
                size="large"
                v-model="value"
                disabled
                show-score
                text-color="#ff9900"
                score-template="{value}"
              />
            </div>
          </div>
          <div style="font-size: 12px">
            我觉得十分的有意思，这是一次最好的体验 我觉得十分的有意思，这是一次最好的体验
          </div>

        </div>

      </div>
      <hr>
    </div>
  </div>
</template>

<script setup>
import {ref} from "vue";
import {useRouter} from "vue-router";
const router= useRouter()
const value = ref(3.7)
const hotel_images = ref([
  'https://gd-hbimg.huaban.com/17f2a2325d149910d48e216fcbb09bafd496d4583d47d-wIWJfu_fw480webp',
  "https://gd-hbimg.huaban.com/47caa9434b7668391d196c1c30161dc5ce08a9edd54f-N9M0U3_fw480webp",
  "https://gd-hbimg.huaban.com/edd5e114db3e58b69d2e59059a4b277ee548755638257-yAR57v_fw480webp",
  "https://gd-hbimg.huaban.com/a70b6e50255ac5d081e4b95167923708cd311a9e1aa6c-GGLDQr_fw480webp",
])

</script>

<style lang="scss" scoped>
.wordtop {
  width: 100%;
  height: 5rem;
  background-color: white;
  margin-top: 1rem;
  padding-left: 1rem;
  font-weight: lighter;
  font-size: 23px;
  position: relative;

  .titleword {
    margin-top: 0.5rem;
  }

  .yudingstyle {
    width: 2.8rem;
    height: 1.3rem;
    background-color: #00b0b7;
    text-align: center;
    font-size: 17px;
    color: white;
    line-height: 1.3rem;
    border-radius: 0.2rem;
    position: absolute;
    right: 2rem;
    bottom: 1rem;
  }

  .iconstyle {
    font-size: 17px;
    color: white;
    width: 1rem;
    height: 0.7rem;
    background-color: red;
    position: absolute;
    top: -0.4rem;
    left: 4rem;
    text-align: center;
    line-height: 0.7rem;

  }
}

.room_info {
  width: 100%;
  height: 6rem;
  background-color: white;
  margin-top: 0.5rem;
  overflow: hidden;
  padding-left: 1rem;
  font-size: 22px;

  tr > td {
    padding-top: 0.3rem;
  }
}

.server_setting {
  width: 100%;
  height: 6rem;
  background-color: white;
  margin-top: 0.5rem;
  padding-left: 1rem;
}

.pingjia {
  width: 100%;
  height: 6rem;
  background-color: white;
  margin-top: 0.5rem;
  padding-left: 1rem;
}

.pinglun {
  width: 100%;
  background-color: white;
  margin-top: 0.5rem;
  padding-left: 0.5rem;
  overflow: auto;

}
</style>
